<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>flex布局</title>
		<style type="text/css">
			.wrapper{
				height: 900px;
				width: 600px;
				display: flex;
				border: 1px solid #000;
				/*flex-wrap: nowrap;*/
				/*不换行*/
				/*flex-direction: column;*/
				/*反向 行对齐reverse*/
				/*coloumn 列对齐*/
				/*flex-flow:row-reverse nowrap;*/
				/*justify-content: space-between;
				整体排序*/
				/*justify-content: space-around;*/
				/*justify-content: space-evenly;*/
				/*align-items: stretch;
				没高度铺满*/
				/*align-items: center;*/
				/*居中*/
				/*align-items: flex-end;*/
				justify-content: center;
				flex-direction: column;
			}
			.div1{
				width: 180px;
				height: 200px;
				background: red;
			}
			.div2{
				width: 180px;
				height: 200px;
				background: green;
			}
			.div3{
				width: 180px;
				height: 200px;
				background: dodgerblue;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
		   <div class="div1">div1</div>
		   <div class="div2">div2</div>
		   <div class="div3">div3</div>
	    </div>
	</body>
</html>

